<template>
  <a-card :title="formTile + '封样明细'">
    <template #extra>
      <a-button type="primary" style="margin-left: 10px" @click="toPrint">打印</a-button>
      <a-button type="primary" style="margin-left: 10px" @click="deApproveSealBill">反审核</a-button>
    </template>
    <div class="main">
      <div class="steps-content">
        <a-row type="flex" justofy="start" align="top">
          <a-col span="24">
            <a-descriptions bordered :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
              <a-descriptions-item label="单号">
                {{ billNo }}
              </a-descriptions-item>
              <a-descriptions-item label="单据状态">
                {{ fyDetail.billFlag }}
              </a-descriptions-item>
              <a-descriptions-item label="工艺单号">
                {{ fyDetail.ksBillNo }}
              </a-descriptions-item>
              <a-descriptions-item label="样衣号">
                {{ fyDetail.sampleCode }}
              </a-descriptions-item>
              <a-descriptions-item label="品名">
                {{ fyDetail.sampleName }}
              </a-descriptions-item>
              <a-descriptions-item label="品类">
                {{ fyDetail.sampleCat }}
              </a-descriptions-item>
              <a-descriptions-item label="品牌">
                {{ fyDetail.brand }}
              </a-descriptions-item>
              <a-descriptions-item label="款式">
                {{ fyDetail.styleId }}
              </a-descriptions-item>
              <a-descriptions-item label="波段">
                {{ fyDetail.band }}
              </a-descriptions-item>
              <a-descriptions-item label="厂家">
                {{ fyDetail.factory }}
              </a-descriptions-item>
              <a-descriptions-item label="封样日期">
                {{ fyDetail.audDate }}
              </a-descriptions-item>
              <a-descriptions-item label="封样人">
                {{ fyDetail.sealer }}
              </a-descriptions-item>
              <a-descriptions-item label="工艺师">
                {{ fyDetail.crafter }}
              </a-descriptions-item>
              <a-descriptions-item label="部门">
                {{ fyDetail.department }}
              </a-descriptions-item>
              <a-descriptions-item label="业务员">
                {{ fyDetail.auderYwy }}
              </a-descriptions-item>
              <a-descriptions-item label="品牌排名">
                {{ fyDetail.brandRank }}
              </a-descriptions-item>
            </a-descriptions>
            <a-card>
              <a-form :form="form" :labelCol="FormItemLayout.labelCol" :wrapperCol="FormItemLayout.wrapperCol">
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="是否重新封样" style="text-align: left" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
                      <a-checkbox :checked="fyDetail.isReSeal == 'Y'" > </a-checkbox>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="重新封样原因" style="text-align: left" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">{{ fyDetail.reSealReason }}
                      <!-- <span style="white-space: pre-line;margin-top: -15px;">
                        {{ fyDetail.reSealReason }}
                      </span> -->
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="发现问题类型" style="text-align: left" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">{{ fyDetail.problemType }}
                      <!-- <span style="white-space: pre-line;margin-top: -15px;">
                        {{ fyDetail.problemType }}
                      </span> -->
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="齐码质量登记" style="text-align: left" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">{{ fyDetail.qualitySign }}
                      <!-- <span style="white-space: pre-line;margin-top: -15px;">
                        {{ fyDetail.qualitySign }}
                      </span> -->
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item label="具体问题" style="text-align: left" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">{{ fyDetail.specificProblem }}
                  <!-- <span style="white-space: pre-line;margin-top: -15px;">
                    {{ fyDetail.specificProblem }}
                  </span> -->
                </a-form-item>
                <a-form-item label="同意更改工厂优化工艺" style="text-align: left">
                  {{ fyDetail.optimizeCraft }}
                  <!-- <span style="white-space: pre-line;margin-top: -15px;">
                    {{ fyDetail.optimizeCraft }}
                  </span> -->
                </a-form-item>
                <a-form-item label="备注" style="text-align: left;display: flex; flex-wrap: wrap;">
                  {{ fyDetail.remark }}
                  <!-- <span style="margin-top: -15px;">
                    {{ fyDetail.remark }}
                  </span> -->
                </a-form-item>

                <a-form-item label="红扣样" style="text-align: left;display: flex; flex-wrap: wrap;">
                  {{ fyDetail.redButtonSample }}
                  <!-- <span style="margin-top: -15px;">
                    {{ fyDetail.redButtonSample }}
                  </span> -->
                </a-form-item>

                <a-form-item label="封样意见" style="text-align: left;display: flex; flex-wrap: wrap;white-space:pre-line;" >
                  <div v-html="fyDetail.sealOpinion">
                  </div>
                  <!-- <span style="white-space: pre-line;margin-top: -15px;">
                    {{ fyDetail.sealOpinion }}
                  </span> -->
                </a-form-item>
              </a-form>
            </a-card>
            <a-card>
              <a-form :form="form" :labelCol="FormItemLayout.labelCol" :wrapperCol="FormItemLayout.wrapperCol">
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="童装绳带确认" style="text-align: left" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">{{ fyDetail.ropeConfirm }}
                      <!-- <span style="white-space: pre-line;margin-top: -15px;">
                        {{ fyDetail.ropeConfirm }}
                      </span> -->
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="齐码定位裁剪" style="text-align: left" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">{{ fyDetail.locationClip }}
                      <!-- <span style="white-space: pre-line;margin-top: -15px;">
                        {{ fyDetail.locationClip }}
                      </span> -->
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="齐码胶印" style="text-align: left" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">{{ fyDetail.offsetPrint }}
                      <!-- <span style="white-space: pre-line;margin-top: -15px;">
                        {{ fyDetail.offsetPrint }}
                      </span> -->
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="试穿确认" style="text-align: left" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">{{ fyDetail.fittingConfirm }}
                      <!-- <span style="white-space: pre-line;margin-top: -15px;">
                        {{ fyDetail.fittingConfirm }}
                      </span> -->
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item label="版师意见" style="text-align: left">
                  {{ fyDetail.samplerOpinion }}
                </a-form-item>

                <a-form-item label="试穿不确认原因" style="text-align: left">
                  {{ fyDetail.unConfirmReason }}
                </a-form-item>

                <a-form-item label="试穿不确认具体原因" style="text-align: left">
                  {{ fyDetail.unFittingReason }}
                  <!-- <span style="white-space: pre-line;margin-top: -15px;">
                    {{ fyDetail.unFittingReason }}
                  </span> -->
                </a-form-item>
                <a-form-item label="重点工艺" style="text-align: left">
                  {{ fyDetail.importantCraft }}
                </a-form-item>
              </a-form>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div>
        <a-row style="border: 1px solid #f5f5f5; overflow: hidden">
          <a-col :span="4">
            <a-row class="lastTitle"> 单位:cm </a-row>
            <a-row>
              <a-col :span="4" class="contentT"> 序号 </a-col>
              <a-col :span="6" class="contentT"> 号型/部位 </a-col>
              <a-col :span="14" class="contentT"> 成衣测量说明 </a-col>
            </a-row>
            <a-row>
              <a-row v-for="(item, i) in SizeDetail" :key="i" >
                <a-col :span="4" class="contentH">
                  <span>{{ i + 1 }}</span>
                </a-col>
                <a-col :span="6" class="contentH">
                  <span>{{ item.part }}</span>
                </a-col>
                <a-col :span="14" class="contentE">
                  <span >{{ item.clff }}</span>
                </a-col>
              </a-row>
            </a-row>
          </a-col>
          <a-col :span="20">
            <a-row class="lastTitle"> 成衣尺寸 </a-row>
            <a-row>
              <div style="display: flex; flex-wrap: wrap">
                <div v-for="(item, i) in sizeDetailList" :key="i" class="contentH" :style="{ width: `${100 / sizeDetailList.length}%` }">
                  {{ item.sizeid }}
                </div>
              </div>
            </a-row>
            <a-row>
              <div style="display: flex; flex-wrap: wrap">
                <div v-for="(item, i) in sizeDetailList" :key="i" class="contentM" :style="{ width: `${100 / sizeDetailList.length}%` }">
                  <div>{{ item.model }}</div>
                </div>
              </div>
            </a-row>
            <a-row>
              <div style="display: flex; flex-wrap: wrap">
                <div v-for="(item, i) in sizeDetailList" :key="i" class="contentM" :style="{ width: `${100 / sizeDetailList.length}%` }" style="display: flex; justify-content: space-around">
                  <div class="contentM" style="width: 20%">尺寸</div>
                  <div class="contentM" style="width: 20%">偏差1</div>
                  <div class="contentM" style="width: 20%">偏差2</div>
                  <div class="contentM" style="width: 20%">偏差3</div>
                  <div class="contentM" style="width: 20%">偏差4</div>
                </div>
              </div>
            </a-row>
            <a-row>
              <div style="display: flex; flex-wrap: wrap" v-for="(item, i) in SizeDetail" :key="i">
                <div v-for="(subitem, index) in sizeDetailList" :key="index" class="contentH" :style="{ width: `${100 / sizeDetailList.length}%` }">
                  <div>
                    <div v-for="(x, i) in item.info" :key="i" style="display:flex;">
                      <div
                        v-if="x.sizeId == subitem.sizeid"
                        class="inputRight"
                        style="z-index: 100; width: 20%; padding: 0 3px; text-align: center"
                      >
                        {{ x.sizeNum }}
                      </div>
                      <div
                        v-if="x.sizeId == subitem.sizeid"
                        class="inputRight"
                        style="z-index: 100; width: 20%; padding: 0 3px; text-align: center"
                      >
                        {{ x.diff }}
                      </div>
                      <div
                        v-if="x.sizeId == subitem.sizeid"
                        class="inputRight"
                        style="z-index: 100; width: 20%; padding: 0 3px; text-align: center"
                      >
                        {{ x.diff2 }}
                      </div>
                      <div
                        v-if="x.sizeId == subitem.sizeid"
                        class="inputRight"
                        style="z-index: 100; width: 20%; padding: 0 3px; text-align: center"
                      >
                        {{ x.diff3 }}
                      </div>
                      <div
                        v-if="x.sizeId == subitem.sizeid"
                        class="inputRight"
                        style="z-index: 100; width: 20%; padding: 0 3px; text-align: center"
                      >
                        {{ x.diff4 }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-card>
</template>

<script>
import {
  getFyBillDetail,
  getSealSizeList,
  getSizeList,
  unApproveSealBill
} from '@api/rd/index'

const column1 = [
  {
    title: '行号',
    dataIndex: 'seq'
  },
  {
    title: '部位',
    dataIndex: 'part'
  },
  {
    title: '测量方法',
    dataIndex: 'clff'
  }
]

const columnCraft = [
  {
    title: '工艺单号',
    width: 150,
    dataIndex: 'code',
    scopedSlots: { customRender: 'craftCode' }
  },
  {
    title: '单据编号',
    width: 100,
    dataIndex: 'billNo'
  },
  {
    title: '上货季',
    width: 100,
    dataIndex: 'scseason'
  },
  {
    title: '品牌',
    width: 100,
    dataIndex: 'brand'
  },
  {
    title: '小类',
    width: 100,
    dataIndex: 'xl'
  },
  {
    title: '样衣号',
    width: 100,
    dataIndex: 'sampleCode'
  },
  {
    title: '品名',
    width: 100,
    dataIndex: 'sampleName'
  },
  {
    title: '版次',
    width: 100,
    dataIndex: 'bc'
  },
  {
    title: '颜色',
    width: 100,
    dataIndex: 'stycolorid'
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    align: 'center'
  }
]
export default {
  props: {
    content: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      id: '',
      column1,
      billNo: '',
      ksBillNo: '',
      showImport: false,
      isSync: false,
      //loading: false,
      disabled: false,
      nonError: true,
      idEdit: false,
      partBillId: '',
      partId: '',
      SizeDetail: [],
      fyDetail: {},
      craftList: [],
      //craftDetail: {},
      sealReasonList: [],
      problemTypeList: [],
      sizeQualityList: [],
      ropeConfirmList: [],
      locationClipList: [],
      offsetPrintList: [],
      fittingConfirmList: [],
      sizeDetailList: [],
      sizeIsPrint: [],
      subform: {},
      approveform: {},
      form: this.$form.createForm(this),
      FormItemLayout: {
        labelCol: {
          xl: { span: 4 }
        },
        wrapperCol: {
          xl: { span: 16 }
        }
      },
      loading: false,
      hasSelected: false,
      selectedRowKeys: [],
      selectionRows: [],
      columnCraft: columnCraft,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      },
      billId: null,
      focusvalue: ''
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  mounted() {
    // this.getDictChildList('SEAL_REASON', 'sealReasonList')
    // this.getDictChildList('PROBLEM_TYPE', 'problemTypeList')
    // this.getDictChildList('SIZE_QUALITY', 'sizeQualityList')
    // this.getDictChildList('YESNO', 'ropeConfirmList')
    // this.getDictChildList('YESNO', 'locationClipList')
    // this.getDictChildList('OFFSET_PRINT', 'offsetPrintList')
    // this.getDictChildList('YESNO', 'fittingConfirmList')
    this.getSizeDetail()
  },
  created() {
    //const { content } = this.$props
    const billNo = this.$route.query.billNo
    const ksBillNo = this.$route.query.ksBillNo
    console.log(this.$route.query)
    if (billNo) {
      this.formTile = '查看'
      this.billNo = billNo
      this.ksBillNo = ksBillNo
      this.$nextTick(() => {
        this.getfyDetail()
        this.disabled = true
      })

      this.idEdit = true
    } else {
      this.$message.error('未获取到封样单号！')
    }
  },
  methods: {
    toPrint(){
      this.$router.push({ path: '/seal/toprint', query:{ billNo: this.billNo, ksBillNo: this.ksBillNo, sampleCode: this.fyDetail.sampleCode}})
    },
    reset() {
      this.form.resetFields()
      this.$router.push(`/seal/index`)
    },
    async getfyDetail() {
      const params = {
        billNo: this.billNo
      }
      try {
        const res = await getFyBillDetail(params)
        if (res.code == 200) {
          this.fyDetail = res.data
          if(this.fyDetail.billFlag == 'S' ){
            this.fyDetail.billFlag = '未审核'
          }else if(this.fyDetail.billFlag == 'Y' ){
            this.fyDetail.billFlag = '已审核'
          }else if(this.fyDetail.billFlag == '2' ){
            this.fyDetail.billFlag = '跟单'
          }else if(this.fyDetail.billFlag == '3' ){
            this.fyDetail.billFlag = '工艺'
          }
          this.getSizeList()
          this.isSync = this.fyDetail.isReSeal == '是' ? true : false
          // this.form.setFieldsValue({
          //   remark: this.fyDetail.remark,
          //   //samplerOpinion: this.fyDetail.samplerOpinion,
          //   sealOpinion: this.fyDetail.sealOpinion,
          //   specificProblem: this.fyDetail.specificProblem,
          //   optimizeCraft: this.fyDetail.optimizeCraft,
          //   redButtonSample: this.fyDetail.redButtonSample,
          //   unFittingReason: this.fyDetail.unFittingReason,
          //   reSealReason: this.fyDetail.reSealReason ? this.fyDetail.reSealReason.split(',') : [],
          //   problemType: this.fyDetail.problemType ? this.fyDetail.problemType.split(',') : [],
          //   qualitySign: this.fyDetail.qualitySign,
          //   ropeConfirm: this.fyDetail.ropeConfirm,
          //   locationClip: this.fyDetail.locationClip,
          //   offsetPrint: this.fyDetail.offsetPrint,
          //   fittingConfirm: this.fyDetail.fittingConfirm
          // })
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取封样单失败!')
          }
        }
      } catch (error) {
        this.$message.error('获取封样单失败!')
      }
    },

    //获取部位尺码明细
    async getSizeDetail() {
      const params = {
        billNo: this.billNo
      }
      try {
        const res = await getSealSizeList(params)
        if (res.code == 200) {
          this.SizeDetail = res.data
          if (this.SizeDetail) {
            this.partBillId = this.SizeDetail[0].billId
            this.partId = this.SizeDetail[0].id
          }
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位信息失败!')
          }
        }
      } catch (error) {
        this.$message.error('获取部位信息失败!')
      }
    },

    async getSizeList() {
      const params = {
        sampleCode: this.fyDetail.sampleCode
      }
      console.log(this.fyDetail)
      try {
        const res = await getSizeList('c17', params)
        if (res.code == 200) {
          this.sizeDetailList = res.data
          //this.getSealSizeIsPrint()
          console.log(this.sizeDetailList)
          // this.sizeDetailList.map((item)=>{
          //   item.model = item.model.replace("/","\n")
          // })
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取尺寸失败!')
          }
        }
      } catch (error) {
        this.$message.error('获取尺寸失败!')
      }
    },
    
    async deApproveSealBill(){
      const { realname } = this.userInfo
      const params = {
        billNo: this.billNo,
        operator: realname
      }
      console.log(params)
      try{
        const res = await unApproveSealBill(params)
        if(res.code == 200){
          this.$message.success('反审核成功')
          this.$router.push({ path: '/seal/tomodify', query: { billNo: this.billNo, ksBillNo: this.ksBillNo} })
        }else{
          if(res.msg){
            this.$message.error(res.msg)
          }else{
            this.$message.error('反审核失败！')
          }
        }
      } catch(error) {
        this.$message.error('反审核失败！')
      } finally {
        this.loading = false
      }
    }
  
  }
}
</script>

<style scoped>
.contentH {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 12px;
  text-align: center;
  line-height: 40px;
  font-weight: 500;
}
.contentE {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 12px !important;
  text-align: center;
  font-weight: 500;
  overflow: hidden;
}
.contentT {
  border: 1px solid #f5f5f5;
  height: 120px;
  font-size: 12px;
  text-align: center;
  line-height: 120px;
  font-weight: 500;
}
.contentM {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 12px;
  text-align: center;
  white-space: pre-line;
  line-height: 40px;
  font-weight: 500;
}
.inputRight{
  border-right: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  font-size: 12px;
  text-align: center;
  height: 40px;
  /* align-items: center; */
  /* line-height: 40px; */
}
.lastTitle {
  font-size: 18px;
  font-weight: 500;
  background: #fafafa;
  line-height: 60px;
  border: 1px solid #f5f5f5;
  height: 60px;
  text-align: center;
}
.steps-content {
  margin-top: 16px;
  min-height: 200px;
  text-align: center;
  padding-top: 50px;
}
</style>
<!-- <style scoped>
.inputRight input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.inputRight input[type='number'] {
  -moz-appearance: textfield;
}
</style> -->